<template>
	<contents
		:heightInclude="['tabBar', 'navBar']"
		class="collection"
		:nullData="
			activeName === 0 ? goodsList.length === 0 : storeList.length === 0
		"
	>
		<u-navbar
			:background="{ background: '#0049AC' }"
			title-color="#fff"
			:is-back="false"
			height="48"
		>
			<view class="heade">
				<view class="back" @click="back">
					<u-icon name="arrow-left" color="#fff" size="35"></u-icon>
				</view>
				<u-tabs
					bg-color="#0049AC"
					active-color="#fff"
					inactive-color="#fff"
					:list="tabList"
					:current="activeName"
					@change="tabChack"
				></u-tabs>
				<view class="edit-btn" @click="isEdit = !isEdit">
					{{ isEdit ? $t('locales.complete') : $t('locales.edit') }}
				</view>
			</view>
		</u-navbar>

		<view class="list-body">
			<view v-if="activeName === 0">
				<checkbox-group
					v-if="activeName == 0"
					@change="goodsItemChange"
				>
					<view
						class="goods-pur"
						v-for="item in goodsList"
						:key="item.id"
					>
						<view
							class="checkbox"
							:style="{ display: isEdit ? '' : 'none' }"
						>
							<checkbox
								:value="String(item.id)"
								:checked="item.checked"
								color="rgb(0, 73, 172)"
								style="transform:scale(0.7)"
							/>
						</view>
						<view
							class="goods-info"
							:style="{ 'margin-left': isEdit ? '0' : '' }"
							@click="
								navSwitch(
									'/pages/productDetails/index?id=' +
										item.goodsId
								)
							"
						>
							<u-image
								class="goods-img"
								width="160rpx"
								height="160rpx"
								:src="item.goodsPicUrl"
							></u-image>
							<view class="info">
								<view class="goods-name">
									{{ item.commonName }}

									<view class="goods-status">
										<view v-if="!item.goodsStatus" class="invalid">已失效</view>
									</view>
								</view>
								
								<view class="goods-price">
									<view class="price">
										￥{{ item.goodsPriceD }}
									</view>
									<view class="remove-price">
										{{ item.goodsBasePriceD }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view v-if="activeName === 1">
				<checkbox-group
					v-if="activeName === 1"
					@change="storeItemChange"
				>
					<view
						class="goods-pur"
						v-for="item in storeList"
						:key="item.id"
					>
						<view
							class="checkbox"
							:style="{ display: isEdit ? '' : 'none' }"
						>
							<checkbox
								:value="String(item.id)"
								:checked="item.checked"
								color="rgb(0, 73, 172)"
								style="transform:scale(0.7)"
							/>
						</view>
						<view
							class="goods-info"
							:style="{ 'margin-left': isEdit ? '0' : '' }"
							@click="
								navSwitch(
									'/pages/index/store/index?domainPrefix=' +
										item.domainPrefix
								)
							"
						>
							<u-image
								class="goods-img"
								:src="item.logoUrl"
								width="160rpx"
								height="160rpx"
							></u-image>
							<view class="info">
								<view class="goods-name">
									{{ item.storeName }}
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>

		<view class="footer" :style="{ display: isEdit ? '' : 'none' }">
			<view class="checkbox" style="color:rgb(0, 73, 172);width: 160rpx;">
				<checkbox-group v-if="activeName == 0" @change="goodsAllChange">
					<checkbox
						:value="'all'"
						:checked="allchecked"
						style="transform:scale(0.7)"
						color="rgb(0, 73, 172)"
					/>
				</checkbox-group>
				<checkbox-group v-if="activeName == 1" @change="storeAllChange">
					<checkbox
						:value="'all'"
						:checked="allchecked"
						style="transform:scale(0.7)"
						color="rgb(0, 73, 172)"
					/>
				</checkbox-group>
				<view style="color:rgb(0, 73, 172);width: 80rpx;">{{ $t('locales.selectAll') }}</view>
			</view>
			<view class="delbtn" @click="del()">{{ $t('locales.delete') }}</view>
		</view>
	</contents>
</template>

<script>
import {
	getPurchaseStoreList,
	goodsCollect,
	cancelCollect,
	mineCancelCollect
} from '@/api/http/collection.js'
export default {
	data() {
		return {
			storeList: [],
			goodsList: [],
			tabList: [
				{
					name: this.$t('locales.goods')
				},
				// 只有app才有店铺收藏
				// #ifndef H5
				{
					name: this.$t('locales.store')
				},
				// #endif
			],
			pageNo: 1,
			activeName: 0,
			isEdit: false,
			checkedList: [],
			checkedAll: [],
			allchecked: false
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.purchaseGoodsList()
	},
	methods: {
		// tab切换
		tabChack(name) {
			this.activeName = name
			this.isEdit = false
			this.allchecked = false
			this.checkedList = []
			this.checkedAll = []
			if (name === 0) {
				this.purchaseGoodsList()
			} else {
				this.purchaseStoreList()
			}
		},
		// 获取商品收藏
		purchaseGoodsList() {
			goodsCollect({
				pageNo: this.pageNo,
				pageSize: 500,
				// #ifdef H5
				domainPrefix: this.$store.getters.domainPrefix
				// #endif
			}).then(res => {
				if (res.code == 200) {
					this.goodsList = res.data.records
					if (this.goodsList.length == 0) {
						this.checkedAll = []
						this.allchecked = false
					}
				}
			})
		},
		// 获取店铺收藏
		purchaseStoreList() {
			getPurchaseStoreList({ pageNo: this.pageNo, pageSize: 200 }).then(
				res => {
					if (res.code == 200) {
						this.storeList = res.data.records
						if (this.storeList.length == 0) {
							this.checkedAll = []
							this.allchecked = false
						}
					}
				}
			)
		},
		// 商品勾选
		goodsItemChange(val) {
			this.checkedList = val.detail.value
			if (this.checkedList.length == this.goodsList.length) {
				this.checkedAll = ['all']
				this.allchecked = true
			} else {
				this.checkedAll = []
				this.allchecked = false
			}
		},

		// 商品全选
		goodsAllChange(val) {
			if (val.detail.value[0] == 'all') {
				this.goodsList.map(item => {
					this.checkedList.push(item.id)
					this.$set(item, 'checked', true)
				})
			} else {
				this.checkedList = []
				this.goodsList.map(item => {
					this.$set(item, 'checked', false)
				})
			}
			this.checkedAll = val.detail.value
		},

		// 店铺勾选
		storeItemChange(val) {
			this.checkedList = val.detail.value
			if (this.checkedList.length == this.storeList.length) {
				this.checkedAll = ['all']
				this.allchecked = true
			} else {
				this.checkedAll = []
				this.allchecked = true
			}
		},

		// 店铺全选
		storeAllChange(val) {
			if (val.detail.value[0] === 'all') {
				this.storeList.map(item => {
					this.checkedList.push(item.id)
					this.$set(item, 'checked', true)
				})
			} else {
				this.checkedList = []
				this.goodsList.map(item => {
					this.$set(item, 'checked', false)
				})
			}
			this.checkedAll = val.detail.value
		},
		// 删除
		del() {
			// 删除商品
			if (this.activeName == 0) {
				cancelCollect({
					goodsCollectIdList: this.checkedList
				}).then(res => {
					if (res.code == 200) {
						this.checkedList = []
						this.isEdit = false
						this.purchaseGoodsList()
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
			if (this.activeName == 1) {
				mineCancelCollect({
					storeIdList: this.checkedList
				}).then(res => {
					if (res.code == 200) {
						this.checkedList = []
						this.isEdit = false
						this.purchaseStoreList()
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
		},
		back() {
			uni.navigateBack()
		},
		navSwitch(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.collection {
	font-size: 25rpx;
	box-sizing: border-box;

	.heade {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		width: 100%;
		.back {
			width: 100rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}
		.edit-btn {
			width: 100rpx;
			padding-right: 20rpx;
			height: 80rpx;
			line-height: 90rpx;
			color: #fff;
			font-weight: 600;
			text-align: right;
		}
	}

	.checkbox {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list-body {
		overflow-y: auto;
		padding-bottom: 101rpx;
		box-sizing: border-box;
		.goods-pur:nth-child(1) {
			padding-top: 20rpx;
		}
		.goods-pur {
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			width: 100%;
			box-sizing: border-box;

			.goods-info {
				flex: 1;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				margin-left: 20rpx;

				.goods-img {
					border-radius: 10rpx;
					padding: 10rpx;
				}

				.info {
					height: 145rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goods-name {
						width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						height: 80rpx;
						line-height: 30rpx;

						.goods-status {
							margin-top: 10rpx;
						}
						.invalid {
							display: inline-block;
							padding: 0 8rpx;
							line-height: 32rpx;
							border-radius: 4rpx;
							font-size: 22rpx;
							color: #fff;
							background: #CCCCCC;
						}
					}

					.goods-price {
						display: flex;
						align-items: center;

						.price {
							color: #ff1010;
						}

						.remove-price {
							margin-left: 10rpx;
							margin-top: 4rpx;
							font-size: 20rpx;
							color: #555;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.footer {
		height: 101rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		display: flex;
		align-items: center;
		color: #222;
		overflow: hidden;
		justify-content: space-between;
		padding-left: 20rpx;
		.delbtn {
			padding: 0 20rpx;
			height: 50rpx;
			background-color: $theme-color;
			color: #fff;
			border-radius: 10rpx;
			line-height: 50rpx;
			text-align: center;
			margin-right: 30rpx;
		}
	}
}

/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	width: 39rpx;
	height: 39rpx;
	border-radius: 50%;
}

/deep/ uni-checkbox .uni-checkbox-input {
	width: 39rpx;
	height: 39rpx;
	border-radius: 50%;
}
</style>
